<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { useDataScreenListStore } from '@/store/modules/dcp/enginee_certification/dataScreenList';

const useDataScreenList = useDataScreenListStore();

const data1 = ref<number[]>([]);// L1
const data2 = ref<number[]>([]);// L2
const data3 = ref<number[]>([]);// 总
const xAxisData = ref<string[]>([]);// 下标
const total = ref<number>(0);// 获得研发工程师验证级别总人数
// 根据公司获取address
function getCityByName(companyName: string, companyAndAddress: any[]): string | undefined {
  for (const [city, companies] of Object.entries(companyAndAddress)) {
    for (const company of companies) {
      if (company.name === companyName) {
        return city;
      }
    }
  }
  return undefined; // 如果没有找到匹配的公司名称，返回 undefined
}
function getdata() {
  xAxisData.value = useDataScreenList.company;
  const companyAndAddress = useDataScreenList.companyAndAddress;
  const cTotalData = useDataScreenList.getCompanyTotalData();
  xAxisData.value.forEach((item: string) => {
    const city = getCityByName(item, companyAndAddress);
    const alldata = cTotalData.find(item => item.address === city);
    const data = alldata?.company[0];
    if (data) {
      data1.value.push(data.engineer_L1);
      data2.value.push(data.engineer_L2);
      data3.value.push(data.engineer);
    }
  });
}
// 获取DOM节点
const charts = ref();
// 组件挂载完毕
onMounted(async () => {
  await useDataScreenList.getTotalData();
  const sxData = useDataScreenList.getSxData();
  total.value = sxData.engineer;
  getdata();

  const mychart = echarts.init(charts.value);
  // 设置配置项
  mychart.setOption({
    // 标题组件
    legend: {
      data: ['L1', 'L2', '总人数'],
      right: '8%',
      top: '2%',
      textStyle: {
        fontSize: 20, // 字体大小
        color: '#fff', // 字体颜色
      },
    },
    xAxis: {
      type: 'category',
      axisLabel:
      {
        show: true,
        color: '#fff',
        interval: 0, // 使x轴上的文字显示完全,
        // 设置一行显示几个字,自己设置
        formatter(params: string) {
          let newParamsName = '';
          const paramsNameNumber = params.length;
          const provideNumber = 8;
          const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (let p = 0; p < rowNumber; p++) {
              let tempStr = '';
              const start = p * provideNumber;
              const end = start + provideNumber;
              if (p === rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              }
              else {
                tempStr = `${params.substring(start, end)}\n`;
              }
              newParamsName += tempStr;
            }
          }
          else {
            newParamsName = params;
          }
          return newParamsName;
        },
      },
      data: xAxisData.value,
    },
    yAxis: {},
    // 布局组件
    grid: {
      left: 20,
      bottom: 50,
      right: 20,
    },
    // 系列:决定显示图形图标是哪一种的
    series: [
      {
        name: 'L1',
        type: 'bar',
        data: data1.value,
        // 柱状图的:图形上的文本标签，
        label: {
          show: true,
          // 文字的位置
          position: 'top',
          // 文字颜色
          color: '#fff',
        },

        // 是否显示背景颜色
        showBackground: false,
        // 柱条的样式
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          color: '#0afabe',
        },
      },
      {
        name: 'L2',
        type: 'bar',
        data: data2.value,
        // 柱状图的:图形上的文本标签，
        label: {
          show: true,
          // 文字的位置
          position: 'top',
          // 文字颜色
          color: '#fff',
        },
        // 是否显示背景颜色
        showBackground: false,
        // 柱条的样式
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          color: '#29fcff',
        },
      },
      {
        name: '总人数',
        type: 'line',
        data: data3.value,
        smooth: true, // 平滑曲线
        itemStyle: {
          color: '#37c7e2', // 所有圆节点都设置为红色
        },
        lineStyle: {
          type: 'dashed',
          color: '#3485d2', // 折线颜色
        },
      },
    ],
    tooltip: {
      trigger: 'axis', // 触发类型 axis-坐标轴触发(主要在柱状图，折线图等会使用类目轴的图表中使用)
      // 坐标轴指示器配置项
      axisPointer: {
        type: 'shadow',
      },
    },
  });
});
</script>

<template>
  <div class="box6">
    <div class="top">
      <div class="left">
        <div class="title">
          <div style="margin-top: 10px;">
            研发工程师验证级别
          </div>
          <div style="margin-top: 5px;">
            等级分布情况
          </div>
          <p class="bg" style="margin-top: 5px;margin-bottom: 5px;" />
        </div>
      </div>
      <div class="right">
        <div style="margin-top: 20px;margin-right: 20px;">
          获研发工程师验证级别
        </div>
        <div style="margin-top: 10px;margin-left: 50px;">
          总人数<span>{{ total }}</span>人
        </div>
      </div>
    </div>

    <!-- 图形图标的容器 -->
    <div ref="charts" class="charts" />
  </div>
</template>

<style scoped lang="scss">
.box6 {
  width: 100%;
  height: 100%;
  margin: 20px 0px;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;

  .top {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;

    .left {
      .title {
        font-size: 25px;
        color: white;
      }

      .bg {
        width: 80px;
        height: 7px;
        // margin-top: -10px;
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
      }
    }

    .right {
      float: right;
      margin-right: 30px;
      font-size: 25px;
      color: white;

      span {
        margin: 0 5px;
        color: #29fcff;
      }
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}
</style>
